{% extends base %}

{% block head %}
<script type="text/javascript" src="/static/lib/csv.js/csv.js"></script>
<script type="text/javascript" src="/static/lib/marked/marked.js"></script>
<script type="text/javascript" src="/static/js/marked-ext.js"></script>

<style type="text/css">
    .x-left {
        position: absolute;
        left: 200px;
        bottom: 0px;
        width: 200px;
        height: 100%;
        overflow-y: auto;
        border-right: 1px solid #ccc;
    }

    .x-body {
        left: 400px;
    }

    #noteView {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        border: none;
    }

    .search-box {
        width: 100%;
    }

    .main-content {
        padding: 0px;
    }


    .x-left {
        position: absolute;
        left: 200px;
        width: 200px;
        bottom: 0px;
        top: 0px;
        overflow-y: auto;
        border-right: 1px solid #ccc;
    }

    .x-left-title {
        border-bottom: 1px solid #ccc;
        padding: 5px;
    }

    .x-left-content {
        padding: 5px;
    }

    .x-left-content li {
        list-style: none;
        line-height: 20px;
    }

    .x-body {
        left: 400px;
    }
</style>
{% end %}


{% block left_part %}

{% init page = 0 %}

    <div class="note-list-search hide">
      <div class="search-box">
        <form method="GET" action="/search/search">
          <input id="key" name="key" class="nav-search-input" value="{{?key}}"/>
          <button class="nav-search-btn btn-default">搜</button>
        </form>
      </div>
    </div>

    <div class="note-list-left">
        {% for note in notes %}
            <a class="left-note-item" data-href="{{note.url}}?is_iframe=true">
                <div class="book-item">
                    {{note.name}}
                </div>
            </a>
        {% end %}
    </div>

    <div class="x-left-title">
        目录
        {% if _has_login %}
        <a class="float-right" href="/note/add?parent_id={{file.parent_id}}">{{T("Create")}}</a>
        {% end %}
    </div>
    <div class="x-left-content">
        {% for item in notes %}
            <li><a class="left-note-item" data-href="/note/{{item.id}}?is_iframe=true">{{item.name}}</a></li>
        {% end %}
    </div>

{% end %}


{% block body %}
    <iframe id="noteView"></iframe>

    <script type="text/javascript">
        $(".left-note-item").click(function () {
            var href = $(this).attr("data-href");
            $("#noteView").attr("src", href);
        })
    </script>
{% end %}